<template>
  <div>
    <n-space align="center">
    <RouterLink to="/page1/1212">
        <n-button color="#8a2be2">
            <template #icon>
                <n-icon>
                    <CashIcon />
                </n-icon>
            </template>
                Page01
        </n-button>
    </RouterLink>
    <RouterLink to="/page2/666">
        <n-button color="#ff69b4">
        <template #icon>
          <n-icon>
            <CashIcon />
          </n-icon>
        </template>
            Page02
      </n-button>
    </RouterLink>
    <RouterLink to="/page3">
        <n-button ghost color="#8a2be2" @click="openPage3">
        <template #icon>
          <n-icon>
            <CashIcon/>
          </n-icon>
        </template>
            Page03
      </n-button>
    </RouterLink>
    </n-space>
    <div class="text">
      <RouterView/>
    </div>
  </div>
   
  </template>
  
  <script setup>
  import { CashOutline as CashIcon } from "@vicons/ionicons5";
  import { onBeforeRouteLeave, RouterLink, RouterView, useRouter } from "vue-router";

  const route=useRouter()
  const openPage3=()=>{
    // 1.不传递参数
    // route.push('/page3')

    // 2.传递参数
    route.push({
      path:'/page3',
      query:{
        id:123
      }
    })
  }

  // // 监听路由地址信息变化
  // onBeforeRouteUpdate((to,from)=>{
  //   console.log('检测到路由地址变化',to);
  //   //应用场景：检测当前页面的路由变化，进而执行新的网络请求获取新的数据
  // })
  // onBeforeRouteLeave((to,from)=>{
  //   let bool = alert('当前页面信息没保存')
  //   return bool
  // })
  </script>